<template>
	<scroll-view class="container" id="scrollview" scroll-y="true" :scroll-top="currButton"  @scroll="talkScroll" :style="{'height':`${contentViewHeight}px`}">
			<view id="talkContent">
				<block v-for="(item,index) in messageData" :key="index">
					<view :class="['taskItem', 'item_'+item.isWho]">
						<view :class="'item_'+item.isWho+'-avatar'">
							<image :src="item.avatar" mode=""></image>
						</view>
						<view :class="'item_'+item.isWho+'-box'">
							<view :class="'item_'+item.isWho+'-text'">{{item.content}}</view>
						</view>
					</view>
				</block>
			</view>
			
		<!-- 消息循环 -->


		<!-- 输入框 -->
		<view class="input">
			<view class="input-wrap">
				<input class="input-box" type="text" confirm-type="send" @confirm="postMessage"  v-model="messageVal" placeholder="点此输入内容" />
				<button class="input-btn" size="mini" @click="postMessage">提交</button>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				currButton: 0,
				currHeight: 0,
				contentViewHeight: 0,
				messageData: [{
						avatar: '/static/exchange/navIcon-2.png',
						userName: 'losting',
						content: '你好',
						isWho: 'right'
					},
					{
						avatar: '/static/exchange/navIcon-2.png',
						userName: 'losting',
						content: '你好，减肥加飞啊飞啊解耦与佛鳄哦阿姐佛尔哎',
						isWho: 'left'
					},
					{
						avatar: '/static/exchange/navIcon-2.png',
						userName: 'losting',
						content: 'jjjjklsjofieajf fiajfo',
						isWho: 'left'
					}
				],
				messageVal: '',
				bottomPadd:0
			};
		},
		created() {
			const res = uni.getSystemInfoSync(); //获取手机可使用窗口高度     api为获取系统信息同步接口
			this.contentViewHeight = res.windowHeight ; //像素   因为给出的是像素高度 然后我们用的是upx  所以换算一下 
			this.bottomPadd=parseInt(80/res.pixelRatio*1.5) 
			this.scrollToBottom(); //创建后调用回到底部方法
		},
		
		methods: {
			talkScroll(e) {
				this.currHeight = e.detail.scrollHeight
				console.log(this.currHeight)
			},
			scrollToBottom() {
				let that = this;
				that.$nextTick(function(){
					let query = uni.createSelectorQuery();
					query.select('#talkContent').boundingClientRect();
					query.select('#scrollview').boundingClientRect();
					query.exec((res) => {
						if (res[0].height > (res[1].height-100-that.bottomPadd)) { //判断子元素高度是否大于显示高度
							that.currButton = res[0].height- (res[1].height-100-that.bottomPadd) //用子元素的高度减去显示的高度就获益获得序言滚动的高度
							console.log(that.currButton)
						}
					})
				})
				
			},
			
			postMessage() { 
				if (this.messageVal) {
					let curMessage = {
						avatar: '/static/exchange/navIcon-2.png',
						content: this.messageVal,
						isWho: 'right'
					}
					this.messageData.push(curMessage)
					this.messageVal = ''
					this.scrollToBottom()
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "./messageDetail.scss"
</style>
